<template>
  <v-row justify="space-between">
    <v-col cols="6" md="3">
      <v-card height="100%">
        <v-treeview
          v-model:activated="active"
          v-model:opened="open"
          :items="tree"
          density="compact"
          item-title="title"
          item-value="id"
          activatable
          open-on-click
          rounded
          @update:activated="$emit('activated', active)"
          @update:selected="$emit('selected', open)"
        >
        </v-treeview>
      </v-card>
    </v-col>

    <v-col class="d-flex text-center" cols="18" md="9">
      <TableCard
        :placeholder="searchPlaceholder"
        :addDialogWidth="addDialogWidth"
        :addDialogConfirmClick="addDialogConfirmClick"
        :addDialogBtnName="addDialogBtnName"
        :addDialogColumns="addDialogColumns"
        :addDialogTitle="addDialogTitle"
        :addDialogConfirmText="addDialogConfirmText"
        :addDialogConfirmColor="addDialogConfirmColor"
        :addDialogCancelText="addDialogCancelText"
        :addDialogOpts="addDialogOpts"
        :addDialogIconLimit="addDialogIconLimit"
        :headers="headers"
        :morebtn="morebtn"
        :filters="filters"
        :onload="tableOnload"
        @delete="e => $emit('delete', e)"
        @edit="e => $emit('edit', e)"
        @delete_all="e => $emit('delete_all', e)"
        @export_all="e => $emit('export_all', e)"
        @add_change="e => $emit('add_change', e)"
      />
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
import { VTreeview } from 'vuetify/labs/VTreeview';
import TableCard from './TableCard.vue';
import { onMounted, ref } from 'vue';
import { FormCardItems, TreeSelector } from '@/types/util';
import { BtnOptions } from '@/types/btn';

const { treeOnLoad } = defineProps({
  searchPlaceholder: { type: String, default: () => '请输入' },
  addDialogWidth: { type: String, default: () => '600' },
  addDialogBtnName: { type: String, default: () => '添加' },
  addDialogColumns: { type: String, default: () => '1' },
  addDialogTitle: { type: String, default: () => '添加' },
  addDialogConfirmText: { type: String, default: () => '确认' },
  addDialogCancelText: { type: String, default: () => '取消' },
  addDialogConfirmColor: { type: String, default: () => 'primary' },
  addDialogConfirmClick: { type: Function },
  addDialogCancelClick: { type: Function },
  addDialogDataChange: { type: Function },
  addDialogOpts: { type: Array<FormCardItems> },
  addDialogIconLimit: { type: Number, default: () => 20 },
  headers: {
    type: Array<any>,
    default: () => [
      { title: '名称', align: 'start', key: 'name' },
      { title: '地址', align: 'center', key: 'location' },
      { title: '操作', align: 'center', key: 'action', width: '160' },
    ],
  },
  tableOnload: {
    type: () => Promise.resolve(),
  },
  morebtn: {
    type: Array<BtnOptions>,
  },
  filters: {
    type: Array<any>,
    default: () => ['name', 'location'],
  },
  treeOnLoad: {
    type: Function as unknown as () => Promise<TreeSelector[]>,
  },
});

const active = ref<string[] | null>(null);
const open = ref<string[] | null>(null);
const tree = ref<TreeSelector[]>([]);

onMounted(() => {
  treeOnLoad &&
    treeOnLoad
      .then(res => {
        tree.value = res;
      })
      .catch(err => {
        console.error('tree load error', err);
      });
});
</script>

<style scoped></style>
